<template>
    <div id="main">
        <div class="sku-box store-content">
            <div class="sort-option">
                <ul class="line clear">
                    <li><a href="javascript:;" class="active">综合排序</a></li>
                    <li><a href="javascript:;" class="">销量排序</a></li>
                    <li><a href="javascript:;" class="">价格低到高</a></li>
                    <li><a href="javascript:;" class="">价格高到低</a></li>
                </ul>
            </div>
            <div class="gray-box">
                <div class="item-box">
                    <div class="item">
                        <div>
                            <div class="item-img"><img alt="Smartisan 快充移动电源 10000mAh" src="http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg?x-oss-process=image/resize,w_206/quality,Q_80/format,webp" style="opacity: 1;">
                            </div>
                            <h6>Smartisan 快充移动电源 10000mAh</h6>
                            <h3 >10000mAh 双向快充、轻盈便携、高标准安全保护</h3>
                            <div class="params-colors">
                                <ul class="colors-list">
                                    <li><a href="javascript:;" class="active"><img src="http://img01.smartisanos.cn/attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/20X20.jpg"></a></li>
                                </ul>
                            </div>
                            <div class="item-btns clearfix">
                                <span class="item-gray-btn"><a href="javascript:;" target="_blank">查看详情</a> </span><span class="item-blue-btn">加入购物车 </span>
                            </div>
                            <div class="item-price clearfix">
                                <i>¥</i><span>199.00</span>
                            </div>
                            <div class="discount-icon">false</div>
                            <div class="item-cover">
                                <a href="javascript:;" target="_blank"></a>
                            </div>
                        </div>
                    </div>
                    <div class="item" v-for="(item,index) in goodlist" :key="index">
                        <div v-if="index<3">
                            <div class="item-img">
                                <img :src="item.stock_info[tabIdx].image" style="opacity: 1;">
                            </div>
                            <h6>{{item.stock_info[tabIdx].title}}</h6>
                            <h3 >{{item.stock_info[tabIdx].sub_title}}</h3>
                            <div class="params-colors">
                                <ul class="colors-list">
                                    <li 
                                        v-for="(itm,idx) in item.stock_info" 
                                        :key="itm.stock_id"
                                        @click="tabIdx=idx"
                                    >
                                        <a 
                                            href="javascript:;" 
                                            :class="['active']"
                                            :style="{background:itm.detail.color}"
                                        ></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="item-btns clearfix">
                                <span class="item-gray-btn"><a href="javascript:;" target="_blank">查看详情</a> </span><span class="item-blue-btn">加入购物车 </span>
                            </div>
                            <div class="item-price clearfix">
                                <i>¥</i><span>{{item.stock_info[tabIdx].price}}</span>
                            </div>
                            <div class="discount-icon">false</div>
                            <div class="item-cover">
                                <a href="javascript:;" target="_blank"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                goodlist: [],
                tabIdx:0
            }
        },
        created () {
            axios.get('http://localhost:3000/list')
            .then(res=>{
                console.log(res);
                this.goodlist = res.data
            })
        },
    }
</script>

<style lang="less" scoped>
@import url('../assets/css/goodsList.css');
</style>